<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card shadow="never" class="card">
          <div id="charts_one" style="width:100%;min-height:80vh">
            <Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
            <div class="btn-group" style="margin-bottom:11px;">
              <div>
                <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/app/InStock/add.html')" >{{$t('action.add')}}</el-button>
              </div>
              <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
            </div>
            <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
              <el-table-column align="center" type="selection" width="42"></el-table-column>
              <el-table-column align="center" type="index" label="No." width="50" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[1].checked" property="billNo" :label="$t('field.InStock_billNo')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[2].checked" property="stockorg" :label="$t('field.InStock_stockorg')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[3].checked" property="prdorg" :label="$t('field.InStock_prdorg')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[4].checked" property="stockNo" :label="$t('field.InStock_stockNo')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  {{getStockName(scope.row.stockNo)}}
                </template>
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[5].checked" property="createTime" :label="$t('field.InStock_createTime')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  {{parseTime(scope.row.createTime)}}
                </template>
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[6].checked" property="status" :label="$t('field.InStock_status')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status === 'save'? '': (scope.row.status === 'audit'? 'success': 'danger')">{{ scope.row.status === 'save'? '保存': (scope.row.status === 'audit'? '审核': '创建') }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[7].checked" property="stocker" :label="$t('field.InStock_stocker')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[8].checked" property="taskBillNo" :label="$t('field.InStock_taskBillNo')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[9].checked" property="count" :label="$t('field.InStock_count')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[10].checked" property="qualityCount" :label="$t('field.InStock_qualityCount')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[12].checked" property="createUserName" :label="$t('field.InStock_createUserName')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[13].checked" property="auditUserName" :label="$t('field.InStock_auditUserName')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[14].checked" property="auditTime" :label="$t('field.InStock_auditTime')" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[15].checked" property="updateTime" :label="$t('field.InStock_updateTime')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  {{parseTime(scope.row.updateTime)}}
                </template>
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[16].checked" property="quality" :label="$t('field.InStock_quality')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.quality === true? 'success': 'danger'">{{ scope.row.quality === true? '是':'否' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" :label="$t('system.operation')" align="center" width="160">
                <template slot-scope="scope">
                  <div v-if="scope.row.id">
                    <el-button type="text" style="   'color: #FFCC00'"  size="mini" icon="el-icon-sort"  @click="quality(scope.row)"  >{{$t('action.quality')}}</el-button>
                    <el-button size="mini" type="text" @click="detail(scope.row)"  v-if="checkPermission('/app/InStock/detail.html')"><i class="el-icon-view" />{{$t('action.detail')}}</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--添加-->
    <Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
    <!--修改-->
    <Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
    <!--查看详情-->
    <Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
  </div>
</template>
<script>
import {
  index,
  updateExt,
  getUpdateInfo,
  del,
  audit,
  unAudit,
  quality,
  qualityIndex
} from '@/api/app/instock'
import Search from '@/components/common/Search.vue'
import Page from '@/components/common/Page.vue'
import TableTool from '@/components/common/TableTool.vue'
import { confirm,param2Obj } from '@/utils/common'
import Add from '@/views/app/instock/add.vue'
import Update from '@/views/app/instock/update.vue'
import Detail from '@/views/app/instock/detail.vue'
import { list } from '@/api/app/stocklist'
export default {
  name:'inStock',
  components: {
    Search,
    Page,
    TableTool,
    Add,
    Update,
    Detail,
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return {
      dialog: {
        addDialogStatus : false,
        updateDialogStatus : false,
        detailDialogStatus : false,
      },
      fieldList:[
        {lable:'ID',checked:true},
        {lable:this.$t('field.InStock_billNo'),checked:true},
        {lable:this.$t('field.InStock_stockorg'),checked:true},
        {lable:this.$t('field.InStock_prdorg'),checked:true},
        {lable:this.$t('field.InStock_stockNo'),checked:true},
        {lable:this.$t('field.InStock_createTime'),checked:true},
        {lable:this.$t('field.InStock_status'),checked:true},
        {lable:this.$t('field.InStock_stocker'),checked:true},
        {lable:this.$t('field.InStock_taskBillNo'),checked:true},
        {lable:this.$t('field.InStock_count'),checked:true},
        {lable:this.$t('field.InStock_qualityCount'),checked:true},
        {lable:this.$t('field.InStock_taskUnit'),checked:true},
        {lable:this.$t('field.InStock_createUserName'),checked:true},
        {lable:this.$t('field.InStock_auditUserName'),checked:true},
        {lable:this.$t('field.InStock_auditTime'),checked:true},
        {lable:this.$t('field.InStock_inStockWay'),checked:true},
        {lable:this.$t('field.InStock_updateTime'),checked:true},
        {lable:this.$t('field.InStock_quality'),checked:true},

      ],
      ids: [],
      selectRows:[],
      selectTotal:0,
      single:true,
      multiple:true,
      list: [],
      small_tables:{},
      addInfo:{},
      updateInfo:{},
      detailInfo:{},
      loading: false,
      page_data: {
        limit: 20,
        page: 1,
        total:20,
      },
      searchVisible:true,
      searchForm:[],
      searchData:{},
      stockList:[],
      searchStock:[],
      isRouterAlive:false
    }
  },
  methods: {
    quality(row){
      quality({billNo:row.billNo}).then(res => {
        if (res.status === 200){
          this.$message({message:"质检完成",type:'success'})
          this.index()
        }
      })
    },
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function (){
        this.isRouterAlive = true
      })
      this.index()
    },
    getStockName(val){
      if (this.stockList && this.stockList.length > 0) {
        for (let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].stockNo === val) {
            return this.stockList[i].stockName;
          }
        }
      }
    },
    getStockList(){
      list().then(res => {
        this.stockList = res.data
        for (let i = 0; i < this.stockList.length; i++) {
          let stock = {"val" : this.stockList[i].stockNo,"key" :this.stockList[i].stockName }
          this.searchStock.push(stock)
        }

      })
    },
    index(){
      let param = {limit:this.page_data.limit,page:this.page_data.page}
      Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
      this.loading = true
      qualityIndex(param).then(res => {
        this.list = res.data.data
        this.small_tables=res.sql_field_data
        this.page_data.total = res.data.total
        this.loading = false
        if(this.page_data.page == 1){
          this.searchForm = [
            {type:'Input',label:this.$t('field.InStock_billNo'),prop:'billNo',width:'150px'},
            {type:'Select',label:this.$t('field.InStock_stockNo'),prop:'stockNo',width:'150px',data:this.searchStock},
            {type:'datetime',label:this.$t('field.InStock_createTime'),prop:'createTime',width:'150px'},
            {type:'Input',label:this.$t('field.InStock_taskBillNo'),prop:'taskBillNo',width:'150px'},
            {type:'Input',label:this.$t('field.InStock_createUserName'),prop:'createUserName',width:'150px'},
          ]
        }
      })
    },
    updateExt(row,field){
      if(row.id){
        updateExt({id:row.id,[field]:row[field]}).then(res => {
          this.$message({message: this.$t('system.success'), type: 'success'})
        })
      }
    },
    add(){
      this.dialog.addDialogStatus = true
    },
    update(row){
      let id = row.id ? row.id : this.ids.join(',')
      getUpdateInfo({id:id}).then(res => {
        if(res.status == 200){
          this.dialog.updateDialogStatus = true
          this.updateInfo = res.data
        }
      })
    },
    del(row){
      confirm({content:this.$t('system.confirmOperation')}).then(() => {
        let ids = row.id ? row.id : this.ids.join(',')
        del({id:ids}).then(res => {
          this.$message({message: this.$t(res.msg), type: 'success'})
          this.index()
        })
      }).catch(() => {})
    },
    detail(row){
      this.dialog.detailDialogStatus = true
      this.detailInfo = {billNo:row.billNo }
    },
    selection(selection) {
      this.selectRows=selection
      this.selectTotal=selection.length
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleRowClick(row, rowIndex,event){
      if(event.target.className !== 'el-input__inner'){
        this.$refs.multipleTable.toggleRowSelection(row)
      }
    },
    rowClass ({ row, rowIndex }) {
      for(let i=0;i<this.ids.length;i++) {
        if (row.id === this.ids[i]) {
          return 'rowLight'
        }
      }
    },
  },
  mounted(){
    this.index()
    this.getStockList()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>